/*----------本项目要依赖jquery-3.5.1.js的支持----------- */
//当前页码
let currentPage = 1
//总页数
let totalPage = 20
//用户名
let userName = 'tom'
//页码
let page = 1
//一页几条数据
let pageSize = 10
//请求到的数据列表
let list = []
let baseUrl = 'http://146.56.230.35:3007/'
/**
 * 获得用户列表数据
 * @date 2021-03-22
 * @returns {any}
 */
function getUserList() {
  return new Promise(function (resolve, reject) {
    $.ajax({
      url: 'http://146.56.230.35:3007/users/userList',
      type: 'GET',
      data: {
        userName,
        page,
        pageSize,
      },
      success(res) {
        resolve(res)
      },
      error(err) {
        reject(err)
      },
      headers: {
        token: getToken().token,
      },
    })
  })
}

/**
 * 渲染表格数据
 * @date 2021-03-22
 * @param {any} list
 * @returns {any}
 */
function appendTable(list) {
  if (!list || list.length === 0) {
    return
  }
  let table = $('#userListTable')
  table.find('tr:not(:first)').remove()
  list.forEach(function (item, index) {
    let tr = `
      <tr>
        <td>${item.userCode}</td>
        <td>${item.userName}</td>
        <td>${item.gender}</td>
        <td>${
          new Date().getFullYear() - new Date(item.birthday).getFullYear()
        }</td>
        <td>${item.phone}</td>
        <td>${item.roleName}</td>
        <td>
          <a href="userView.html?id=${item.id}"
            ><img src="img/read.png" alt="查看" title="查看"
          /></a>
          <a href="userUpdate.html?id=${item.id}"
            ><img src="img/xiugai.png" alt="修改" title="修改"
          /></a>
          <a href="javascript:void(0)"  class="removeUser" data-id="${item.id}"
           data-role="${
             item.userRole
           }" ><img src="img/schu.png"  alt="删除" title="删除"
          /></a>
        </td>
      </tr>
    `
    table.append(tr)
  })
  //点击删除按钮的操作
  $('.removeUser').click(function (e) {
    //管理员权限用户不能删除
    let userRole = +$(this).attr('data-role')
    if (userRole === 1) {
      return alert('你没有权限删除管理员用户！')
    }
    //删除前一定要确认，给客户一个反悔的机会
    let res = confirm('确定要删除吗？')
    if (!res) {
      return alert('你取消了删除！')
    }
    let id = +$(this).attr('data-id')
    $.ajax({
      url: baseUrl + 'users/deleteUserById',
      type: 'DELETE',
      data: { id },
      success(res) {
        console.log(res)
        if (res.data === 1) {
          appendList(page)
        }
      },
      error(err) {
        console.log(err)
      },
      headers: {
        token: getToken().token,
      },
    })
  })
}

/**
 * 动态生成分页器的函数
 * @date 2021-03-22
 * @param {any} pageNum
 * @returns {any}
 */
async function appendList(pageNum) {
  /*<-----------------拼接表格------------------- */
  page = pageNum
  pageSize = +$('.opt').val()
  userName = $('.search-user').val()
  //首次加载请求数据
  let res = await getUserList()
  //计算总页数
  totalPage = Math.ceil(res.data.count / pageSize)
  list = res.data.list
  //表格渲染
  appendTable(list)
  /*<-----------------拼接表格------------------- */
  /*<-----------------分页器----------------------*/
  $('.desc span:eq(0)').html(totalPage)
  //先删除所有的page-item
  let pageItem = $('.page-item')
  if (pageItem) {
    pageItem.remove()
  }
  //确定当前页码的范围
  let start = pageNum <= 6 ? 1 : pageNum - 5
  let end = start + 9
  //如果超过总条数时，等于总条数
  if (end >= totalPage) {
    end = totalPage
  }
  //使用循环拼接元素
  for (let i = start; i <= end; i++) {
    let a = $(`<a href="##" class="page-item">${i}</a>`)
    //给点击的元素添加
    if (pageNum === i) {
      a = $(`<a  href="##"  class="page-item active">${i}</a>`)
    }
    //把a元素动态拼接到页码中
    a.insertBefore($('.next-page'))
    //给页码按钮元素绑定事件
    a.click(function () {
      let index = parseInt(a.html())
      appendList(index)
      currentPage = index
      $('.pager').val(currentPage)
      $('.desc span:eq(1)').html(currentPage)
    })
  }
  /*-----------------分页器-------------------> */
}

//工厂函数
$(function () {
  //页面首次加载第1页
  appendList(1)
  //点击下一页的操作
  $('.next-page').click(function () {
    currentPage++
    if (currentPage >= totalPage) {
      currentPage = totalPage
    }
    appendList(currentPage)
    $('.pager').val(currentPage)
    $('.desc span:eq(1)').html(currentPage)
  })
  //点击上一页的操作
  $('.prev-page').click(function () {
    currentPage--
    if (currentPage <= 0) {
      currentPage = 1
    }
    appendList(currentPage)
    $('.pager').val(currentPage)
    $('.desc span:eq(1)').html(currentPage)
  })
  //pager输入框失去焦点或回车时可以实现分页器的变化
  $('.pager')
    .blur(function () {
      let currentPage = +$(this).val()
      appendList(currentPage)
      $('.pager').val(currentPage)
      $('.desc span:eq(1)').html(currentPage)
    })
    .keydown(function (e) {
      if (e.which === 13) {
        let currentPage = +$(this).val()
        appendList(currentPage)
        $('.pager').val(currentPage)
        $('.desc span:eq(1)').html(currentPage)
      }
    })
  //当select发生变化时执行的操作
  $('.opt').change(function () {
    appendList(1)
  })
  //点击查询
  $('.search-btn').click(function () {
    appendList(1)
  })
  //输入框获得焦点时清空内容
  $('.search-user').focus(function () {
    $(this).val('')
  })
})
